<template>
  <div class="material">
    <el-card shadow="never">
      <el-upload class="main_header" :action="baseUrl" :limit="3">
        <el-button size="small" type="primary">点击上传素材</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
      <div class="card-list">
        <el-card v-for="item in cardList" :key="item.id" class="card-item">
          <div class="card-header">创建时间{{ item.createTime }}</div>
          <div class="card-img">
            <el-image
              style="height: 250px; width: 180px"
              :src="item.ossUrl"
              fit="fill"
            />
          </div>
          <div class="del">
            <el-button
              type="danger"
              @click="delCardItem(item.id)"
            >删除</el-button>
          </div>
        </el-card>
      </div>
      <!-- 分页 -->
      <div class="main-footer">
        <div class="block">
          <el-pagination
            :current-page="page.currentPage"
            :page-sizes="page.pageSizes"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import mixins from '@/mixins/index'
import {
  findMaterialByPage,
  delMaterial
} from '@/api/contents/material/index.js'
export default {
  mixins: [mixins],
  data() {
    return {
      cardList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 获得卡片列表
    init() {
      findMaterialByPage(this.page.currentPage, this.page.pageSize).then(
        (res) => {
          this.cardList = res.data.rows
          this.page.total = res.data.total
        }
      )
    },
    // 删除
    delCardItem(id) {
      this.delData(id, delMaterial)
    }
  }
}
</script>

<style lang="scss" scoped>
.material {
  .main_header {
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(216, 216, 216);
  }
  .card-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .card-item {
      width: 19%;
      margin: 20px 0.5% 0;
      .card-header {
        font-size: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ebeef5;
      }
      .card-img {
        height: 250px;
        margin: 0 auto;
      }
      .del {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
        .el-button {
          padding: 5px 20px;
          line-height: 20px;
          width: 80px;
        }
      }
    }
  }
}
</style>
